<!-- Created by jack on 2022/2/22 - 11:16 -->
<style scoped lang="less">
@borderWidth: 6px;
@borderInline : 20px;
.border-box{
  position: absolute;
  width: 100%;
  height: 100%;
  //background: #52ba44;
  &__top{
    position: absolute;
    width: 100%;
    //background: #2877FF;
    height: @borderWidth;
    cursor: ns-resize;
    top: 0;
    left: 0;
    z-index: 1;
  }
  &__bottom{
    position: absolute;
    width: 100%;
    //background: #2877FF;
    height:@borderWidth;
    cursor: ns-resize;
    bottom: 0;
    left: 0;
    z-index: 1;
  }
  &__left{
    position: absolute;
    width: @borderWidth;
    //background: #2877FF;
    height:100%;
    cursor: ew-resize;
    top: 0;
    left: 0;
    z-index: 1;
  }
  &__right{
    position: absolute;
    width:@borderWidth;
    //background: #2877FF;
    height:100%;
    cursor: ew-resize;
    top: 0;
    right: 0;
    z-index: 1;
  }
  &__top-left{
    position: absolute;
    width: @borderInline;
    height: @borderInline;
    //background: #52ba44;
    top: -10px;
    left: -10px;
    cursor: nwse-resize;
    z-index: 1;
  }
  &__top-right{
    position: absolute;
    width: @borderInline;
    height: @borderInline;
    //background: #52ba44;
    top: -10px;
    right: -10px;
    cursor: nesw-resize;
    z-index: 1;
  }
  &__bottom-left{
    position: absolute;
    width: @borderInline;
    height: @borderInline;
    //background: #52ba44;
    bottom: -10px;
    left: -10px;
    cursor: nesw-resize;
    z-index: 1;
  }
  &__bottom-right{
    position: absolute;
    width: @borderInline;
    height: @borderInline;
    //background: #52ba44;
    bottom: -10px;
    right: -10px;
    cursor: nwse-resize;
    z-index: 1;
  }
}
</style>

<template>
  <div class="border-box">
    <!--    边框-->
    <div class="border-box__top" :id="topId"/>
    <div class="border-box__bottom" :id="bottomId"/>
    <div class="border-box__left" :id="leftId"/>
    <div class="border-box__right" :id="rightId"/>
    <!--    边框交集  -->
    <div class="border-box__top-left" :id="topLeftId"/>
    <div class="border-box__top-right" :id="topRightId"/>
    <div class="border-box__bottom-left" :id="bottomLeftId"/>
    <div class="border-box__bottom-right" :id="bottomRightId"/>
  </div>

</template>

<script lang="ts" setup>
import { resizeDom } from "@/helper";
import {computed, onBeforeUpdate } from "vue";

const props = defineProps({
  id:{ type:String ,default:'window'},
  focus:{ type:Boolean, default:false },
  minWidth:{ type:String,default:'60px' },
  minHeight:{ type:String,default:'45px' },
})

const topId = computed( () =>  props.id + '-border-top')
const leftId = computed( () =>  props.id + '-border-left')
const bottomId = computed( () =>  props.id + '-border-bottom')
const rightId = computed( () =>  props.id + '-border-right')
const topLeftId = computed( () =>  props.id + '-border-top-left')
const bottomLeftId = computed( () =>  props.id + '-border-bottom-left')
const topRightId = computed( () => ( props.id + '-border-top-right'))
const bottomRightId = computed( () =>  props.id + '-border-bottom-right')
const minWidthCom = computed( () =>  Number(props.minWidth?.replace('px','')))
const minHeightCom = computed( () =>  Number(props.minHeight?.replace('px','')))



onBeforeUpdate(() => {
  resizeDom('#' +leftId.value,'#' +props.id,'row',minWidthCom.value,minHeightCom.value)
  resizeDom('#' +rightId.value,'#' +props.id,'row',minWidthCom.value,minHeightCom.value)
  resizeDom('#' +topId.value,'#' +props.id,'col',minWidthCom.value,minHeightCom.value)
  resizeDom('#' +bottomId.value,'#' +props.id,'col',minWidthCom.value,minHeightCom.value)
  resizeDom('#' +topLeftId.value,'#' +props.id ,'both',minWidthCom.value,minHeightCom.value)
  resizeDom('#' +bottomLeftId.value,'#' +props.id,'both',minWidthCom.value,minHeightCom.value)
  resizeDom('#' +topRightId.value,'#' +props.id,'both',minWidthCom.value,minHeightCom.value)
  resizeDom('#' + bottomRightId.value,'#' + props.id,'both',minWidthCom.value,minHeightCom.value)
})
</script>
